import React, { memo } from "react";
import ThemeContext from "../context/theme-context";
interface TabBarProps {
  tabList: string[];
  onTabChange: (index: number) => void;
  tabItem?: (item: string) => React.ReactNode;
}

const TabBar: React.FC<TabBarProps> = memo((props) => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const handleTabChange = (index: number) => {
    setActiveIndex(index);
    props.onTabChange(index);
  };
  const theme = React.useContext(ThemeContext);

  return (
    <>
      <div className={`tabs ${theme === "dark" ? "dark" : "light"}`}>
        {props.tabList.map((item, index) => (
          <div
            key={item}
            onClick={() => handleTabChange(index)}
            className={`tabs-item ${activeIndex === index ? "active" : ""}`}
          >
            <span>{props.tabItem?.(item) || item}</span>
          </div>
        ))}
      </div>
    </>
  );
});

export default TabBar;
